<DynamicPageBanner title="{intl.pinnedStatuses}" icon="#fa-thumb-tack" />
{#if $isUserLoggedIn }
  <div class="pinned-toots-page">
    {#if loading}
    <LoadingPage />
    {:elseif statuses && statuses.length}
    <ul class="pinned-toots-results">
      {#each statuses as status, index}
      <StatusSearchResult {status} {index} length={statuses.length} />
      {/each}
    </ul>
    {/if}
  </div>
{/if}
<style>
  .pinned-toots-page {
    padding: 20px 20px;
    position: relative;
  }
  .pinned-toots-results {
    list-style: none;
    box-sizing: border-box;
    border: 1px solid var(--main-border);
    border-radius: 2px;
  }
  @media (max-width: 767px) {
    .pinned-toots-page {
      padding: 20px 10px;
    }
  }
</style>
<script>
  import { store } from '../_store/store.js'
  import LoadingPage from '../_components/LoadingPage.html'
  import StatusSearchResult from '../_components/search/StatusSearchResult.html'
  import { toast } from '../_components/toast/toast.js'
  import DynamicPageBanner from '../_components/DynamicPageBanner.html'
  import { getPinnedStatuses } from '../_api/pinnedStatuses.js'
  import { updateVerifyCredentialsForInstance } from '../_actions/instances.js'
  import { formatIntl } from '../_utils/formatIntl.js'

  export default {
    async oncreate () {
      try {
        const { currentInstance } = this.store.get()
        await updateVerifyCredentialsForInstance(currentInstance)
        const { accessToken, currentVerifyCredentials } = this.store.get()
        const statuses = await getPinnedStatuses(currentInstance, accessToken, currentVerifyCredentials.id)
        this.set({ statuses })
      } catch (e) {
        /* no await */ toast.say(formatIntl('intl.error', { error: (e.name || '') + ' ' + (e.message || '') }))
      } finally {
        this.set({ loading: false })
      }
    },
    data: () => ({
      loading: true,
      accounts: []
    }),
    store: () => store,
    components: {
      LoadingPage,
      StatusSearchResult,
      DynamicPageBanner
    }
  }
</script>
